<template>
	<view class="warp">
		<view class="status_bar" style="background-color: #FFF;">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between; box-sizing: border-box;padding: 12rpx 16rpx;background-color: #FFF;align-items: center;" >
			<view style="display: flex;justify-content: space-between;align-items: center; box-sizing: border-box;">
				<view style="width: 72rpx;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
			</view>
			<view>
				<view style="font-size: 32rpx;color: #232426;margin-left: 16rpx;font-weight: 500;">{{user_info.nickname}}</view>
			</view>
			<view style="display: flex;justify-content: flex-end;box-sizing: border-box;">
				
			</view>
		</view>
		<view style="padding: 48rpx 40rpx;">
			<view style="display: flex;justify-content: space-around;align-items: flex-start;">
				<view>
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<view style="color: #232426;font-size: 44rpx;font-weight: 500;">
							{{user_info.rate}}
						</view>
						<view style="margin-left: 16rpx;padding-top: 8rpx;">
							<u-icon name="star-fill" color="#FFA514" size="44"></u-icon>
						</view>
					</view>
					<view style="color: #BEC0C5;font-size: 24rpx;margin-top: 16rpx;">
						{{num}}則
					</view>
				</view>
				<view style="margin-left: 44rpx;">
					<view v-for="(item,index) in rate_list" :key="index">
						<view style="display: flex;justify-content: flex-start;align-items: center;width: 100%;">
							<view style="color: #808690;font-size: 26rpx;">{{item.rate}}</view>
							<view style="width: 370rpx;margin: 0 16rpx;">
								<u-line-progress :percentage="item.score" :showText="false" height="16" activeColor="#FFA514"></u-line-progress>
							</view>
							<view style="color: #808690;text-align: right;">{{item.number}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="background-color: #F6F8FA;width: 100%;height: 24rpx;">
			
		</view>
		<view style="">
			<view style="display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;padding: 32rpx 24rpx 16rpx;">
				<view class="body-menu-list">
					<view :class="{'body-menu-item-active':current==1,'body-menu-item':current!=1}" @click="changeType(1)">
						老闆對我說20萬+
					</view>
					<view :class="{'body-menu-item-active':current==2,'body-menu-item':current!=2}" @click="changeType(2)">
						達人對我說20萬+
					</view>
				</view>
				<view>
					<view class="fifter-btn">
						<view>
							<u-image
								src="/static/images/icon/tools.png"
								width="28rpx"
								height="28rpx"
							></u-image>
						</view>
						<view class="fifter-title">
							最新
						</view>
					</view>
				</view>
			</view>
			<view>
				<view id="evaluate" style="padding:36rpx 32rpx;display: inline-block;width: 100%;box-sizing: border-box;">
					
					<view v-for="(item, index) in commentList" :key="index">
						<view style="display: flex;justify-content: space-between;width:100%;margin-top: 44rpx;">
							<view style="width: 64rpx;">
								<u-image
									:src="item.avatar"
									width="64rpx"
									height="64rpx"
									shape="circle"
								></u-image>
							</view>
							<view style="box-sizing: border-box;min-width: 600rpx;margin-left: 16rpx;">
								<view style="display: flex;justify-content: space-between;align-items: center;">
									<view style="display: flex;justify-content: flex-start;align-items: center;">
										<view style="font-size: 28rpx;font-weight: 600;">{{item.nickname}}</view>
										<view style="color: #808690;font-size: 24rpx;margin-left: 16rpx;">{{item.address}}</view>
									</view>
									<view style="display: flex;justify-content: flex-end;align-items: center;">
										
										<u-icon
										  v-if="item.rateCount > 0"
										  size="32rpx"
										  name="star-fill"
										  color="#FFA514"
										></u-icon>
										<u-icon
										  v-if="item.rateCount > 1"
										  size="32rpx"
										  name="star-fill"
										  color="#FFA514"
										></u-icon>
										<u-icon
										  v-if="item.rateCount > 2"
										  size="32rpx"
										  name="star-fill"
										  color="#FFA514"
										></u-icon>
										<u-icon
										  v-if="item.rateCount > 3"
										  size="32rpx"
										  name="star-fill"
										  color="#FFA514"
										></u-icon>
										<u-icon
										  v-if="item.rateCount > 4"
										  size="32rpx"
										  name="star-fill"
										  color="#FFA514"
										></u-icon>
										
									</view>
								</view>
								<view style="margin-top: 12rpx;">
									<view style="color: #378CFC;font-size: 28rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.title}}</view>
								</view>
								<view style="width: 100%; display: flex;justify-content: flex-start;" v-if="item.images">
									<view v-for="(item_, index_) in item.images" :key="index_" style="margin: 0 8rpx;">
										<u-image
											:src="item_"
											width="144rpx"
											height="144rpx"
										></u-image>
									</view>
								</view>
								<view style="margin-top: 28rpx;">
									<view>
										<u-parse :content="item.content"></u-parse>
									</view>
								</view>
								<view style="width: 100%;display: flex;justify-content: flex-start;font-size: 24rpx;color: #9E9E9E;margin-top: 28rpx;">{{item.create_date}}</view>
							</view>
						</view>
					</view>
					
					<!-- <view style="display: flex;justify-content: space-between;width:100%;margin-top: 44rpx;">
						<view style="width: 64rpx;">
							<u-image
								src="/static/images/icon/images/Avatar.png"
								width="64rpx"
								height="64rpx"
								shape="circle"
							></u-image>
						</view>
						<view style="box-sizing: border-box;min-width: 600rpx;margin-left: 16rpx;">
							<view style="display: flex;justify-content: space-between;align-items: center;">
								<view style="display: flex;justify-content: flex-start;align-items: center;">
									<view style="font-size: 28rpx;font-weight: 600;">王小明</view>
									<view style="color: #808690;font-size: 24rpx;margin-left: 16rpx;">台北市</view>
								</view>
								<view style="display: flex;justify-content: flex-end;align-items: center;">
									<u-icon
									  size="32rpx"
									  name="star-fill"
									  color="#FFA514"
									></u-icon>
									<u-icon
									  size="32rpx"
									  name="star-fill"
									  color="#FFA514"
									></u-icon>
									<u-icon
									  size="32rpx"
									  name="star-fill"
									  color="#FFA514"
									></u-icon>
									<u-icon
									  size="32rpx"
									  name="star-fill"
									  color="#FFA514"
									></u-icon>
									<u-icon
									  size="32rpx"
									  name="star-fill"
									  color="#FFA514"
									></u-icon>
								</view>
							</view>
							<view style="margin-top: 12rpx;">
								<view style="color: #378CFC;font-size: 28rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">客製化花束，韓式浪漫氛圍束客製化花束，韓式浪漫氛圍束</view>
							</view>
							<view style="margin-top: 28rpx;">
								<view>
									<u-parse :content="richText"></u-parse>
								</view>
							</view>
						</view>
					</view> -->
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uLineProgress from '@/uni_modules/uview-ui/components/u-line-progress/u-line-progress.vue';
	
	import { skillComment } from '@/config/api.js';
	
	export default {
		data() {
			return {
				current:1,
				user_info:{
					rate:0
				},
				rate_list:[
					{
						rate:5,
						score:0,
						number:'0'
					},
					{
						rate:4,
						score:0,
						number:'0'
					},
					{
						rate:3,
						score:0,
						number:'0'
					},
					{
						rate:2,
						score:0,
						number:'0'
					},
					{
						rate:1,
						score:0,
						number:'0'	
					},
				],
				richText:`<div style="font-size: 14px;line-height: 1.6; letter-spacing: 0.14px;">
						<div style="margin-top:20rpx;">想要一束獨一無二的花，傳遞你的心意嗎？</div>
						<div style="margin-top:20rpx;">無論是生日、紀念日、求婚，還是簡單想為生活增添一點儀式感，我都能為你打造專屬的客製化花束！</div>
						<div style="margin-top:20rpx;">以韓式花藝風格為靈感，融合柔和色調與自然線條，每一束花都是細膩設計，讓你的禮物更具溫度與質感。你可以告訴我你的喜好、色系需求，或是讓我為你搭配最合適的花材，打造一束充滿浪漫氛圍的夢幻花束。</div>
						<ul>
							<li style="margin-top:10rpx;">手工設計，獨一無二</li>
							<li style="margin-top:10rpx;">精選新鮮花材，質感滿分</li>
							<li style="margin-top:10rpx;">溫柔韓式風格，氣質加倍</li>
						</ul>
						<div style="margin-top:20rpx;">現在開放訂單，歡迎私訊詢問💌</div>
						<div style="margin-top:5rpx;">讓花語替你說出心裡的話🌷💕</div>
						<div style="display: flex;justify-content: flex-start;align-content: center;gap: 8px; ">
							<img src="https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/banner1.jpg" style="width: 72px;height:72px;">
							<img src="https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/banner1.jpg" style="width: 72px;height:72px;">
							<img src="https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/default.jpg" style="width: 72px;height:72px;">
							<img src="https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/banner1.jpg" style="width: 72px;height:72px;">
						</div>`,
				commentList:[],
				myComment:[],
				otherComment:[],
				num:0
			}
		},
		components: {
			uLineProgress
		},
		onLoad(option) {
			this.user_info = uni.getStorageSync('userInfo');
			this.getRateList()
		},
		methods:{
			goBack(){
				uni.navigateBack();
			},
			changeType(type){
				this.current = type
				this.getRateList()
			},
			getRateList(){
				let that = this;
				let data = {
					type: this.current,
					sort:1//最新,最旧,低到高,高到低
				}
				skillComment({data:data}).then((res) => {
					//success
					console.log( res )
					that.num = res.total
					that.user_info.rate = res.rate
					that.rate_list = res.rate_list
					that.commentList = res.list
					
					// const result = res.commentList.data
					// for( let i in result ){
					// 	if( result[i].user_id == user_info.id ){
					// 		myComment.push(result[i])
					// 	} else {
					// 		otherComment.push(result[i])
					// 	}
					// }
				}).catch(() =>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	width: 100%;
	min-height: 100vh;
	.body-menu-list{
		width: 75%;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		border-bottom: 2rpx solid #F6F8FA;
		
		.body-menu-item{
			color: #808690;
			padding: 0;
			font-size: 28rpx;
			text-align: center;
		}
		.body-menu-item-active{
			padding-bottom: 12rpx;
			font-size: 28rpx;
			color: #232426;
			border-bottom: 5rpx solid #232426;
			font-weight: 500;
			text-align: center;
		}
	}
	.fifter-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #E5E6E8;
		padding: 12rpx 24rpx;
		border-radius: 12rpx;
		
		.fifter-title{
			font-size: 28rpx;
		}
	}
}
</style>